{% extends 'base.html' %}

{% block title %}需求列表 - 校园技能交换平台{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4">
        <div class="col">
            <h2>需求列表</h2>
        </div>
        <div class="col text-end">
            <a href="{% url 'listings:need_create' %}" class="btn btn-primary">发布需求</a>
        </div>
    </div>

    <div class="row">
        <!-- 筛选侧边栏 -->
        <div class="col-md-3">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">筛选条件</h5>
                    <form method="get" action="{% url 'listings:need_list' %}">
                        <!-- 搜索框 -->
                        <div class="mb-3">
                            <label for="q" class="form-label">搜索</label>
                            <input type="text" class="form-control" id="q" name="q" value="{{ current_search|default:'' }}" placeholder="搜索需求...">
                        </div>

                        <!-- 分类筛选 -->
                        <div class="mb-3">
                            <label for="category" class="form-label">分类</label>
                            <select class="form-select" id="category" name="category">
                                <option value="">全部分类</option>
                                {% for key, value in categories.items %}
                                <option value="{{ key }}" {% if key == current_category %}selected{% endif %}>
                                    {{ value }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- 回报方式筛选 -->
                        <div class="mb-3">
                            <label for="reward_type" class="form-label">回报方式</label>
                            <select class="form-select" id="reward_type" name="reward_type">
                                <option value="">全部方式</option>
                                {% for key, value in reward_types.items %}
                                <option value="{{ key }}" {% if key == current_reward_type %}selected{% endif %}>
                                    {{ value }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- 排序方式 -->
                        <div class="mb-3">
                            <label for="sort" class="form-label">排序方式</label>
                            <select class="form-select" id="sort" name="sort">
                                <option value="-created_at" {% if current_sort == '-created_at' %}selected{% endif %}>最新发布</option>
                                <option value="created_at" {% if current_sort == 'created_at' %}selected{% endif %}>最早发布</option>
                                <option value="title" {% if current_sort == 'title' %}selected{% endif %}>按标题</option>
                            </select>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">应用筛选</button>
                        {% if current_category or current_reward_type or current_search %}
                        <a href="{% url 'listings:need_list' %}" class="btn btn-outline-secondary w-100 mt-2">清除筛选</a>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>

        <!-- 需求列表 -->
        <div class="col-md-9">
            {% if needs %}
            <div class="row row-cols-1 row-cols-md-2 g-4">
                {% for need in needs %}
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{% url 'listings:need_detail' need.pk %}" class="text-decoration-none">
                                    {{ need.title }}
                                </a>
                            </h5>
                            <p class="card-text text-muted">
                                {{ need.description|truncatewords:30 }}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    {{ need.get_category_display }} | 
                                    {{ need.get_reward_type_display }}
                                </small>
                                <small class="text-muted">
                                    {{ need.created_at|date:"Y-m-d" }}
                                </small>
                            </div>
                            {% if need.tags %}
                            <div class="mt-2">
                                {% for tag in need.tags.split %}
                                <span class="badge bg-secondary me-1">{{ tag }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-info">
                暂无符合条件的需求。
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %} 